<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram Redrawing</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="600" height="650"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = '#000';
        ctx.fillStyle = '#000';
        ctx.lineWidth = 2;
        ctx.font = '20px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // Helper function to draw an arrow
        function drawArrow(fromx, fromy, tox, toy) {
            const headlen = 8;
            const dx = tox - fromx;
            const dy = toy - fromy;
            const angle = Math.atan2(dy, dx);
            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        }

        // --- Figure (a) ---
        const y_center_a = 150;
        const x_start_a = 220;
        const x_end_a = 520;
        const r_outer = 60;
        const r_inner = 10;

        // Outer cylinder
        ctx.beginPath();
        ctx.moveTo(x_start_a, y_center_a - r_outer);
        ctx.lineTo(x_end_a, y_center_a - r_outer);
        ctx.moveTo(x_start_a, y_center_a + r_outer);
        ctx.lineTo(x_end_a, y_center_a + r_outer);
        ctx.arc(x_end_a, y_center_a, r_outer, -Math.PI / 2, Math.PI / 2);
        ctx.arc(x_start_a, y_center_a, r_outer, Math.PI / 2, 3 * Math.PI / 2);
        ctx.stroke();

        // Inner cylinder (dashed)
        ctx.beginPath();
        ctx.setLineDash([5, 5]);
        ctx.moveTo(x_start_a, y_center_a - r_inner);
        ctx.lineTo(x_end_a, y_center_a - r_inner);
        ctx.moveTo(x_start_a, y_center_a + r_inner);
        ctx.lineTo(x_end_a, y_center_a + r_inner);
        ctx.arc(x_end_a, y_center_a, r_inner, -Math.PI / 2, Math.PI / 2);
        ctx.moveTo(x_start_a, y_center_a + r_inner); // Re-position for the arc
        ctx.arc(x_start_a, y_center_a, r_inner, Math.PI / 2, 3 * Math.PI / 2);
        ctx.stroke();
        
        // Central axis (dash-dot)
        ctx.beginPath();
        ctx.setLineDash([10, 3, 2, 3]);
        ctx.moveTo(x_start_a - 40, y_center_a);
        ctx.lineTo(x_end_a + 20, y_center_a);
        ctx.stroke();
        ctx.setLineDash([]); // Reset line dash

        // Particle and labels
        ctx.beginPath();
        ctx.moveTo(100, y_center_a - 20);
        ctx.lineTo(140, y_center_a - 30);
        ctx.lineTo(140, y_center_a - 10);
        ctx.closePath();
        ctx.fill();
        ctx.fillText('π', 120, y_center_a - 45);

        ctx.font = 'italic 20px Arial';
        ctx.fillText('P', 120, y_center_a + 20);
        ctx.font = '20px Arial';
        
        ctx.beginPath();
        drawArrow(135, y_center_a + 20, 180, y_center_a + 2);
        ctx.stroke();


        // Dimensions
        // 40 cm
        ctx.beginPath();
        ctx.moveTo(x_start_a - 40, y_center_a - r_outer);
        ctx.lineTo(x_start_a - 40, y_center_a + r_outer);
        drawArrow(x_start_a - 40, y_center_a, x_start_a-40, y_center_a - r_outer);
        drawArrow(x_start_a - 40, y_center_a, x_start_a-40, y_center_a + r_outer);
        ctx.stroke();
        ctx.save();
        ctx.translate(x_start_a - 50, y_center_a);
        ctx.rotate(-Math.PI / 2);
        ctx.fillText('40 cm', 0, 0);
        ctx.restore();

        // 5 cm
        ctx.beginPath();
        ctx.moveTo(x_start_a - 20, y_center_a - r_inner);
        ctx.lineTo(x_start_a - 20, y_center_a + r_inner);
        drawArrow(x_start_a - 20, y_center_a, x_start_a-20, y_center_a - r_inner);
        drawArrow(x_start_a - 20, y_center_a, x_start_a-20, y_center_a + r_inner);
        ctx.stroke();
        ctx.save();
        ctx.translate(x_start_a - 30, y_center_a);
        ctx.rotate(-Math.PI / 2);
        ctx.fillText('5 cm', 0, 0);
        ctx.restore();
        
        // Label (a)
        ctx.fillText('(a)', 350, 270);

        // --- Figure (b) ---
        const x_b_start = 200;
        const y_b_top = 340;
        const y_b_bottom = 500;

        // Main circuit layout
        ctx.beginPath();
        // Left part with V0
        ctx.moveTo(x_b_start, y_b_bottom);
        ctx.lineTo(x_b_start, 430);
        // V0 symbol
        ctx.moveTo(x_b_start - 8, 420);
        ctx.lineTo(x_b_start + 8, 420); // short plate
        ctx.moveTo(x_b_start - 8, 400);
        ctx.lineTo(x_b_start + 8, 400); // long plate (part of wire)
        // rest of left wire
        ctx.moveTo(x_b_start, 390);
        ctx.lineTo(x_b_start, y_b_top);
        
        // Top wire with switch
        ctx.lineTo(x_b_start + 60, y_b_top);
        ctx.lineTo(x_b_start + 75, y_b_top-15); // cut corner for switch
        const switch_point_x = x_b_start + 75;
        const switch_point_y = y_b_top-15;

        // Right side of left loop with C
        const x_c_line = x_b_start + 150;
        ctx.moveTo(switch_point_x, switch_point_y);
        ctx.lineTo(x_c_line, switch_point_y);
        ctx.lineTo(x_c_line, 410);
        // Capacitor C symbol
        ctx.moveTo(x_c_line - 10, 410);
        ctx.lineTo(x_c_line + 10, 410);
        ctx.moveTo(x_c_line - 10, 430);
        ctx.lineTo(x_c_line + 10, 430);
        // rest of right wire
        ctx.moveTo(x_c_line, 430);
        ctx.lineTo(x_c_line, y_b_bottom);

        // Bottom wire
        ctx.lineTo(x_b_start, y_b_bottom);
        
        // R-L branch
        const x_rl_line = x_b_start + 280;
        ctx.moveTo(switch_point_x, switch_point_y);
        // Resistor R
        const r_start_x = x_b_start + 180;
        const r_y = switch_point_y;
        ctx.lineTo(r_start_x, r_y);
        ctx.moveTo(r_start_x, r_y);
        let current_x = r_start_x;
        for (let i = 0; i < 6; i++) {
            ctx.lineTo(current_x + 5, r_y + (i % 2 === 0 ? -5 : 5));
            current_x += 5;
        }
        ctx.lineTo(current_x + 5, r_y);
        // Wire after R
        ctx.lineTo(x_rl_line, r_y);
        ctx.lineTo(x_rl_line, 410);

        // Inductor L
        const l_y_start = 410;
        const l_radius = 6;
        const l_coils = 3;
        ctx.moveTo(x_rl_line, l_y_start);
        for (let i = 0; i < l_coils; i++) {
            ctx.arc(x_rl_line, l_y_start + l_radius + 2 * i * l_radius, l_radius, -Math.PI, 0, true);
        }
        const l_y_end = l_y_start + 2 * l_coils * l_radius;
        ctx.moveTo(x_rl_line, l_y_end);
        
        // Wire after L to bottom
        ctx.lineTo(x_rl_line, y_b_bottom);
        ctx.lineTo(x_c_line, y_b_bottom);
        ctx.stroke();

        // Labels for circuit (b)
        ctx.fillText('V', 225, 410);
        ctx.font = '14px Arial';
        ctx.fillText('0', 232, 417);
        ctx.font = '20px Arial';

        ctx.fillText('C', x_c_line + 25, 420);
        ctx.fillText('R', r_start_x + 20, r_y - 20);
        ctx.fillText('L', x_rl_line + 20, l_y_start + l_coils*l_radius);

        // Label (b)
        ctx.fillText('(b)', 300, 540);

        // Figure caption
        ctx.fillText('Fig. 3.78', 300, 590);

    </script>
</body>
</html>